<template>
	<view class="header-view">
		
		<view class="search-logo-view">
			<image src="/static/logo_small.jpg" class="search-logo-img"></image>
		</view>

		<view class="search-view">
			<!-- 如果input内容改变，触发onkeyInput方法 -->
			<input type="text" 
				class="search-input"
			    v-model="search"
			    confirm-type="search"
			    @confirm="onKeyInput"
			    placeholder=" 搜课程" 
			    placeholder-style="font-size:30rpx;color:#B5B9BF"/>
		</view>
		<!-- <view class="address-view">
			<text @click="showMap"  class="address-text"> &emsp;{{name}}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"component-header",
		data() {
			return {
				search:""
			};
		},
		created() {
			
		},
		props:["name"],	//组件接收参数
		methods:{
			onKeyInput(){
				//搜索，调用父组件的方法
				this.$emit("parentCourseSearch",this.search);
			},
			showMap(){
				//跳转地图页面
				console.log("挑战第一");
				uni.navigateTo({
					url: "/pages/map/map",
					fail(error) {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style>
	
	.search-logo-img{
		height: 65rpx;
		width: 65rpx;
	}
	
	.header-view{
		margin: 10rpx 5rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.search-logo-view{
		float: left;
		margin-left: 1%;
	}
	.search-view{
		float: left;
		border: 1rpx #C0C0C0 solid ;
		border-radius: 50rpx;
		width: 89%;
	}
	.search-button-view{
		float: left;
		margin-left: 10rpx;
	}
	.search-input{
		height: 70rpx;
		width: 100%;
		padding-left: 10rpx;
	}
	.address-view{
		float: right;
	}
	.address-text{
		font-size: 32rpx;
		cursor: pointer;
		line-height: 70rpx;
		text-decoration: underline;
	}
	.button-serch{
		margin-left: auto;
		margin-right: auto;
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
		height: 70rpx !important;
		line-height: 70rpx !important;
	}
	
</style>
